
import { View, Text, Input, Icon, Image, Button } from '@tarojs/components';
import { AtTabs, AtTabsPane, AtCountdown } from 'taro-ui';
import Taro , {useRouter, getCurrentInstance}from '@tarojs/taro';
import './group.scss';
import React, { useState, useEffect } from "react";
import store from "../../../store";
import http from "../../../utils/http";
// jp

const group = () => {
  const [val,setVal] = useState([{
    img:'../../../static/img/dingdan.png',name:'精品泰国桂圆 1000g/盒',pintuan:'3人成团',tihuodian:'提货点：鲜丰水果',
    thTime:'下单2小时后',zt:'进行中',day:'2',hours:'1',minutes:'1',seconds:'10',jiage:'7.8'
  },
  {
    img:'../../../static/img/guanlirenyuan.png',name:'精品泰国桂圆 1000g/盒',pintuan:'5人成团',tihuodian:'提货点：鲜丰水果',
    thTime:'下单4小时后',zt:'已结束',day:'2',hours:'1',minutes:'1',seconds:'10',jiage:'9.8'
  }
])
const [val1,setVal1] = useState([{endTime: "2022-05-10T16:00:00.000+00:00",
gmDes: "吃饱饭",
gmNum: 10,
gmNums: 10,
gmPrice: 8,
gmRequiredTime: "5",
gmTt: "荔枝",
gmXg: 8,
goodsOldCost: 4,
groupCount: null,
pic1: "http://tmp/aey0Iv7sgsls77d1e63ef9d9f8055b12d0f553940e6d.png",
pic2: "http://tmp/rSK1wvetjOEE77d1e63ef9d9f8055b12d0f553940e6d.png",
pic3: "http://tmp/VHResndfDGDH77d1e63ef9d9f8055b12d0f553940e6d.png",
startTime: "2022-05-08T16:00:00.000+00:00",
state: 1,}])

  const go = (e) => {
    console.log(e)
    Taro.navigateTo({
      url: '/pages/Group/group_xiangqing/groupXiangqing?key=e',
      events: {
        someEvent: function(data) {
          console.log(data)
        }
      },
      success: function(res) {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit('acceptDataFromOpenerPage', { data: e })
      }
    })
  }
  
  const go1 = () => {
    Taro.navigateTo({
      url: '/pages/Group/group_faqi/groupFaqi'
    })
  }

  useEffect(() => {
    let temp = val1
    for(let i=0;i<val1.length;i++){
      if(val1[i].state == "1"){
        temp[i].state = "进行中"
      }else if(val1[i].state == "0"){
        temp[i].state = "审核中"
      }else if(val1[i].state == "2"){
        temp[i].state = "已结束"
      }
      setVal1(temp)
    }
    console.log(val1)
    console.log(val1[0].state)
    // http({
    //   url: "/merchant/GroupQueryList",
    //   method: "post",
    // }).then(res => {
    //   console.log(res);
    //   if(res.data.code == 200){
    //     console.log("成功")
    //     console.log(res.data.data)
    //     store.s_jp.setShop(val)
        
    //     console.log(store.s_jp.shop)
    //     console.log(store.s_jp.shop[0].img)
    //     setVal1(res.data.data)
    //     for(let i=0;i<val1.length;i++){
    //       if(val1[i].state === "1"){
    //         val1[i].state = "进行中"
    //         // store.s_jp.shop[0].state = "进行中"
    //       }else if(val1[i].state === "0"){
    //         val1[i].state = "审核中"
    //         // store.s_jp.shop[0].state = "审核中"
    //       }else if(val1[i].state === "2"){
    //         val1[i].state = "已结束"
    //         // store.s_jp.shop[0].state = "已结束"
    //       }
    //     }
    //   }else{
    //     console.log("失败")
    //   }
    // });
  },[]);






  return (
    <View className='index'>
      <View className='header'>
        <View>鲜丰水果</View>
        <Text onClick={go1}>发起拼团</Text>
      </View>
      <View className='order_state'>
        <View>
          <Text>1</Text>
          <Text>未开始</Text>
        </View>
        <View>
          <Text>2</Text>
          <Text>进行中</Text>
        </View>
        <View>
          <Text>2</Text>
          <Text>已结束</Text>
        </View>
      </View>
      <View className='order_msg'>
        <View>
          <View>拼团列表</View>
          {/* <Text>时间排序</Text> */}
        </View>
        {/* <View>
          <Input type='text' placeholder='搜索拼团' focus />
          <Icon size='20' type='search' />
        </View> */}
      </View>

      {/* <View><Button onClick={dedao}>点击得到数据</Button></View> */}

        {
          val1.map((item,index)=>(
            <View className='com_img' onClick={event=>go(index)}>
            <Image src={item.pic1}></Image>
            <View className='com_tishi'>{item.state}</View>
            <View className='com_text'>
                <View className='at-row text_one'>
                    <View className='at-col at-col-9'>
                        <Text className='t_people'>{item.gmNum}人成团</Text>
                        <Text> {item.Tt}</Text>
                    </View>
                    <View className='at-col at-col-3 text_right'>
                        <Text>￥{item.gmPrice}</Text>
                        <Text className='del_line'> ￥{item.goodsOldCost}</Text>
                    </View>
                </View>
                <View className='at-row text_two'>
                    <Text className='at-col at-col-8'>已成5团 / 可成{item.gmNums}团 / 每人限购{item.gmXg}份</Text>
                    <Text className='at-col at-col-4 text_right'>提货点：{item.stAdd}</Text>
                </View>
                <View className='at-row text_three'>
                    <View className='at-col at-col-9'>
                        <Text>剩余 </Text>
                        <AtCountdown
                          className='green'
                          format={{ day: '天', hours: ':', minutes: ':', seconds: '' }}
                          isCard
                          isShowDay
                          day={item.endTime-item.endTime}
                          hours={0}
                          minutes={0}
                          seconds={0}
                        />
                    </View>
                    <View className='at-col at-col-3 text_right'>下单{item.gmRequiredTime}小时后</View>
                </View>
            </View>
        </View>
          ))
        }
    </View>
  )
}
export default group;